iT邦幫忙

2025 iThome 鐵人賽

DAY 2
0
Modern Web

網頁技術探索:30天的前端學習系列 第 2

DAY2 認識 HTML:網頁的骨架

  • 分享至 

  • xImage
  •  

標籤 (tag)

HTML的語法跟其他的程式語言有很大的區別,是由許多標籤組成的,每個標籤裡面還能設定屬性的值以達成需要的功能

<a style="float" href="連結網址">顯示文字</a>

<img src="圖片位置"  alt="替代文字">

如圖:
1.標籤:<a></a>跟<img>
2.屬性:style、href、src、alt
3.值:float、"連結網址"、"圖片位置"、"替代文字"

架構

這是一個最基本的 HTML 網頁骨架,幾乎所有網頁都是從這裡開始的。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

一個 HTML 檔案基本上會有這些標籤
<!DOCTYPE html>:來表示這是一份標準的 HTML5 文件
<html> </html>:是 HTML 文件的根元素,只會有一個
<head> </head>:主要說明這個網頁的資訊,如編碼、標題,只會有一個
<meta>:是給瀏覽器看的,暫時先不討論
<body> </body>:主要呈現這個網頁的內容,只會有一個

語意化標籤

主要是為了讓頁面看起來更有意義,讓我們和搜尋引擎可以更清楚的解讀網頁的結構,也就是會影響 SEO (search engine optimization)
簡單舉例如下
<header>:代表開頭區域
<footer>:代表結尾區域
<main>:代表網頁的主要內容


上一篇
DAY1開賽宣言
下一篇
Day3 認識<head>跟 <body>,打造網頁的「頭」跟「身體」
系列文
網頁技術探索:30天的前端學習3
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言